<template>
	<div ref="echart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
	props:{
		isAxisChart:{
			type:Boolean,
			default:true
		},
		chartData:{
			type:Object,
			default(){
				return{
					xData:[],
					series:[]
				}
			}
		}
	},
	watch:{
		chartData: {
			handler: function(){
				this.initChart()
			},
			deep:true
		}
	},
	methods:{
		initChart(){
			this.initChartData()
			if(this.echart){
				alert('reload')
				this.echart.setOption(this.options)
			}
			else{
				this.echart = echarts.init(this.$refs.echart)
				this.echart.setOption(this.options)
				alert(JSON.stringify(this.echart))
			}
		},
		initChartData(){
			if(this.isAxisChart){
				this.axisOption.xAxis.data=this.chartData.xData
				this.axisOption.series=this.chartData.series
				this.options=this.axisOption
			}
			else{
				this.normalOption.series=this.chartData.series
				this.options=this.normalOption
			}
		}
	},
	data(){
		return {
			axisOption:{
				legend:{
					//图例文字颜色
					textStyle:{
						color:'#333',
					},
				},
				grid:{
					left:"20%",
				},
				tooltip: {
					trigger: "axis"
				},
				xAxis:{
					type:'category',  //类目轴
					data: [],
					axisLine:{
						lineStyle:{
							color:"#17b3a3",
						},
					},
					axisLabel:{
						interval:0,
						color:"#333",
					},
				},
				yAxis:[
					{
						type:'value', //类目轴
						axisLine:{
							lineStyle:{
								color:"#17ba3a",
							},
						},
					},
				],
				color:["#2ec7c9","#b6a2de"],
				series: []
				
			},
			normalOption:{
				tooltip:{
					trigger:"item",
				},
				color:[
					"#0f78f4",
					"#dd536b",
					"#9462e5",
					"#a6a6a6",
					"#e1bb22",
					"#39c362",
					"#3ed1cf",
				],
				series: []
			},
			echart:null,
			options:{
				title: {
				  text: 'ECharts默认数据'
				},
				tooltip: {},
				legend: {
				  data: ['demo']
				},
				xAxis: {
				  data: ['1', '2', '3']
				},
				yAxis: {},
				series: [
				  {
				    name: 'demo',
				    type: 'bar',
				    data: [5, 50, 10]
				  }
				]
			}
			
		}
	},
	computed:{
		options(){
			return this.isAxisChart ? this.axisOption : this.normalOption
		}
	}
}
</script>

<style>
</style>
